<template>
	<view class="page">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="search u-flex">
			<u-search placeholder="请输入要搜索的小区名" :showAction="false" v-model="keyword" @search="onSearch"></u-search>
			<view class="select u-flex" @click="onSearch">
				<f-icon name="shaixuan" size="36" color="#000"></f-icon>
				<view class="text">筛选</view>
			</view>
		</view>
		<view class="tabs">
			<u-tabs
				:list="tabsList"
				:current="tabIndex"
				lineColor="tempColor"
				:scrollable="true"
				:activeStyle="{
					color: tempColor,
					fontWeight: 'bold',
					transform: 'scale(1.05)',
					fontSize: fontSizeLg
				}"
				:inactiveStyle="{
					fontSize: fontSizeLg,
					color: '#606266',
					transform: 'scale(1)'
				}"
				:itemStyle="{ flex: 1, height: '44px' }"
				@click="tabsClick"
			></u-tabs>
		</view>

		<swiper :style="{ height: height }" :current="tabIndex" @change="swiperChange">
			<swiper-item v-for="(tab, i) in tabsList" :key="i">
				<mescroll-item ref="mescrollItem" :i="i" :index="tabIndex" :tabs="tabsList" :height="height" :keyword="keyword"></mescroll-item>
			</swiper-item>
		</swiper>

		<f-tabbar></f-tabbar>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import MescrollItem from './module/mescrollUni-item.vue';
import fTabbar from '@/components/module/f-tabbar/f-tabbar';
import theme from '@/common/theme';

export default {
	components: {
		fTabbar,
		MescrollItem
	},
	data() {
		return {
			height: '', // 需要固定swiper的高度
			keyword: '',
			tabsList: [],
			tabIndex: 0,
			tempColor: theme.mainColor,
			fontSizeLg: uni.rpx2px(theme.fontSizeLg) + 'px'
		};
	},
	computed: {
		...mapState(['userInfo']),

		// 这里可以根据 Vuex 或其他状态管理获取用户权限
		userPermissions() {
			// 假设从 Vuex 获取用户权限
			return this.userInfo.roles || [];
		},
		isLoggedIn() {
			// 假设从 Vuex 获取登录状态
			return this.userInfo.token;
		}
	},

	//页面显示
	onShow() {},
	//方法
	methods: {
		initializeTabs() {
			if (this.isLoggedIn) {
				// 解析权限
				switch (this.userPermissions[0].role_key) {
					case 'work':
						this.tabsList = [
							// { name: '待领取', status: 'pending' },
							{ name: '待服务', status: ['assigned'] },
							{ name: '进行中', status: ['inProgress'] },
							{ name: '已完成', status: ['completed'] },
							{ name: '已取消', status: ['cancelled','refund','refundFail'] }
						];
						break;
					default:
						this.tabsList = [
							{ name: '全部', status: ['all'] },
							// { name: '待接单', status: 'pending' },
							{ name: '待服务', status: ['assigned'] },
							{ name: '进行中', status: ['inProgress'] },
							{ name: '已完成', status: ['completed'] },
							{ name: '已取消', status: ['cancelled'] }
						];
						break;
				}
			} else {
				// 如果未登录或未绑定部门，可以设置默认的 tabsList
				this.tabsList = [
					{ name: '全部', status: ['all'] },
					// { name: '待接单', status: 'pending' },
					{ name: '待服务', status: ['assigned'] },
					{ name: '进行中', status: ['inProgress'] },
					{ name: '已完成', status: ['completed'] },
					{ name: '已取消', status: ['cancelled'] }
				];
			}
		},
		//第一次加载
		onLoad(e) {
			// 需要固定swiper的高度
			// #ifndef MP-ALIPAY
			this.height = uni.getSystemInfoSync().windowHeight - uni.rpx2px(88) - 46 + 'px';
			// #endif
			// #ifdef MP-ALIPAY
			this.height = uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight - uni.getSystemInfoSync().titleBarHeight - uni.upx2px(88) - 46 + 'px';
			// #endif

			this.initializeTabs(); // 初始化标签
		},
		onJump(url) {
			uni.navigateTo({
				url: url
			});
		},
		//搜索框搜索
		onSearch() {
			if (!this.keyword) {
				this.$u.toast('搜索的内容不能为空~');
				return;
			}
			var httpData = {
				keyword: this.keyword
			};
			this.$refs.mescrollItem[this.tabIndex].doSearch();
		},
		tabsClick(e) {
			this.tabIndex = e.index;
		},
		// 轮播菜单
		swiperChange(e) {
			this.tabIndex = e.detail.current;
		}
	}
};
</script>
<style lang="scss">
.search {
	height: 88rpx;
	padding: 24rpx 24rpx 0;
	background: #fff;
	.select {
		width: 88rpx;
		flex-direction: column;
		justify-content: center;
		.text {
			font-size: 20rpx;
			color: #000000;
			line-height: 1;
		}
	}
}
.tabs {
	background: #fff;
}
.wid {
	width: 100%;
	font-size: 12px;
}
</style>
